
<template>
  <h1 style="font-size: 20px;color: brown">
    人员问题 导致后端接口未开发完成！！！！！
  </h1>
  <div style="height: 6vh; background-color: #fff; padding: 10px 20px;">
    <span style="line-height: 60px; font-size: 20px;">医生排班</span>
    <el-button type="primary" style="float: right; margin-top: 13px;" @click="addScheduling">新增排班</el-button>
  </div>
  <!-- 排班查询卡片 -->
  <el-card style="margin: 20px; height: 70px;">
    <el-form :inline="true">
      <el-form-item label="日期">
        <el-date-picker
            v-model="searchForm.date"
            type="date"
            placeholder="请选择日期"            style="width: 220px;"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="loadScheduling"></el-date-picker>
      </el-form-item>
      <el-form-item label="姓名">
        <el-select v-model="searchForm.name" placeholder="请选择医生" style="width: 220px;">
          <el-option
              v-for="doctor in schedulingTableData"
              :key="doctor.name"
              :label="doctor.name"
              :value="doctor.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="科室">
        <el-select v-model="searchForm.department" placeholder="请选择科室" style="width: 220px;">
          <el-option
              v-for="department in schedulingTableData"
              :key="department.department"
              :label="department.department"
              :value="department.department">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadScheduling">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 排班表格数据 -->
  <el-card style="margin: 20px;">
    <el-table stripe :data="schedulingTableData">
      <el-table-column label="医生姓名" prop="name" align="center"></el-table-column>
      <el-table-column label="科室" prop="department" align="center"></el-table-column>
      <el-table-column label="排班时间" prop="schedulingTime" align="center"></el-table-column>
      <el-table-column label="余号" prop="remainderNum" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="editScheduling(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 新增排班弹窗 -->
  <el-dialog title="新增排班" v-model="addSchedulingDialogVisible" width="50%">
    <el-form :model="newSchedulingForm" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="医生姓名">
            <el-select v-model="newSchedulingForm.name" placeholder="请选择医生" style="width: 100%;">
              <el-option
                  v-for="doctor in schedulingTableData"
                  :key="doctor.name"
                  :label="doctor.name"
                  :value="doctor.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排班时间">
            <el-date-picker
                v-model="newSchedulingForm.schedulingTime"
                type="date"
                placeholder="请选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"                style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="余号">
            <el-input v-model="newSchedulingForm.remainderNum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addSchedulingDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveScheduling">保存</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 编辑排班弹窗 -->
  <el-dialog title="编辑排班" v-model="editSchedulingDialogVisible" width="50%">
    <el-form :model="editSchedulingForm" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="医生姓名">
            <el-select v-model="editSchedulingForm.name" placeholder="请选择医生" style="width: 100%;">
              <el-option
                  v-for="doctor in schedulingTableData"
                  :key="doctor.name"
                  :label="doctor.name"
                  :value="doctor.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排班时间">
            <el-date-picker
                v-model="editSchedulingForm.schedulingTime"
                type="date"
                placeholder="请选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"                style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="余号">
            <el-input v-model="editSchedulingForm.remainderNum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editSchedulingDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateScheduling">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref,onMounted} from "vue";
import { ElMessage } from "element-plus";
import {Avatar} from '@element-plus/icons-vue';
import axios from "axios";
import qs from "qs";

// 定义对象保存排班搜索条件
const searchForm = ref({ date: '', name: '', department: '' });

// 定义数组用来保存排班列表数据
const schedulingTableData = ref([]);
  // { name: '张医生', department: '内科', schedulingTime: '2023-09-01', remainderNum: '10' },
  // { name: '李医生', department: '外科', schedulingTime: '2023-09-02', remainderNum: '15' },
  // { name: '王医生', department: '儿科', schedulingTime: '2023-09-03', remainderNum: '8' },
  // { name: '赵医生', department: '妇科', schedulingTime: '2023-09-04', remainderNum: '12' },
  // { name: '孙医生', department: '眼科', schedulingTime: '2023-09-05', remainderNum: '20' }


// 定义医生选项
// const doctorOptions = ref([
//   { name: '张医生', department: '内科' },
//   { name: '李医生', department: '外科' },
//   { name: '王医生', department: '儿科' },
//   { name: '赵医生', department: '妇科' },
//   { name: '孙医生', department: '眼科' }
// ]);

// 定义科室选项
// const departmentOptions = ref([
//   '内科',
//   '外科',
//   '儿科',
//   '妇科',
//   '眼科'
// ]);

// 定义表格列
const columns = ref([
  { label: '医生姓名', prop: 'name' },
  { label: '科室', prop: 'department' },
  { label: '排班时间', prop: 'schedulingTime' },
  { label: '余号', prop: 'remainderNum' }
]);

// 控制新增排班弹窗是否显示
const addSchedulingDialogVisible = ref(false);

// 定义新增排班表单数据
const newSchedulingForm = ref({
  name: '',
  schedulingTime: '',
  remainderNum: ''
});

// 控制编辑排班弹窗是否显示
const editSchedulingDialogVisible = ref(false);

// 定义编辑排班表单数据
const editSchedulingForm = ref({
  id: '',
  name: '',
  schedulingTime: '',
  remainderNum: ''
});

// 当前编辑的排班索引
const currentEditingIndex = ref(null);

// 定义加载排班的方法
const loadScheduling = () => {
  // 这里可以添加实际的加载逻辑
  let data = qs.stringify({
    name: searchForm.value.name,
    department: searchForm.value.department,
    schedulingTime: searchForm.value.date
  });

  console.log(data);
  axios.get(BASE_URL + "/doctors/scheduling/select?"+data).then((res) => {
    if (res.data.code === 2001) {
      schedulingTableData.value = res.data.data;
      ElMessage.success('加载排班信息成功');
    } else {
      ElMessage.error('加载排班信息失败，请刷新页面！');
    }
  });

}

// 定义重置搜索的方法
const resetSearch = () => {
  searchForm.value = { date: '', name: '', department: '' };
  loadScheduling();
}

// 一进入到排班页面立即加载
onMounted(() => {
  loadScheduling();
})

// 定义新增排班的方法
const addScheduling = () => {

  addSchedulingDialogVisible.value = true;
  newSchedulingForm.value = {
    name: '',
    schedulingTime: '',
    remainderNum: ''
  };

}


// 定义保存排班的方法
const saveScheduling = () => {
  // 准备要发送的数据
  const schedulingData = {
    name: newSchedulingForm.value.name,
    schedulingTime: newSchedulingForm.value.schedulingTime,
    remainderNum: newSchedulingForm.value.remainderNum
  };
  // 使用 qs 处理 data
  let data = qs.stringify(schedulingData);
  // 发送 POST 请求到后端，将数据作为查询参数附加到 URL 中
  axios.post(BASE_URL + "/doctors/scheduling/insert?" + data)
      .then(response => {
        if (response.data.code === 2001){
          // 处理成功响应
          schedulingTableData.value.push({ ...newSchedulingForm.value });
          addSchedulingDialogVisible.value = false;
          newSchedulingForm.value = {
            name: '',
            schedulingTime: '',
            remainderNum: ''
          };
          ElMessage.success('新增排班成功');
        }else {
          ElMessage.error('新增排班失败，请重试');
        }
      });
}

// 定义编辑排班的方法
const editScheduling = (row) => {
   currentEditingIndex.value = schedulingTableData.value.indexOf(row);
   editSchedulingForm.value = { ...row };
   editSchedulingDialogVisible.value = true;
}
//将id与数据一起发送
const updateScheduling = () => {
  schedulingTableData.value[currentEditingIndex.value] = { ...editSchedulingForm.value };
  editSchedulingDialogVisible.value = false;
  let data = qs.stringify({
    id: editSchedulingForm.value.id,
    name: editSchedulingForm.value.name,
    schedulingTime: editSchedulingForm.value.schedulingTime,
    remainderNum: editSchedulingForm.value.remainderNum
  });
  axios.post(BASE_URL + "/doctors/scheduling/insert?" + data)
      .then(response => {
        if (response.data.code === 2001){
          ElMessage.success('修改排班信息成功');
        }else {
          ElMessage.error('修改排班信息失败，请重试');
        }
      });

}

</script>

<style scoped></style>